<template>
  <a-modal
    :confirmLoading="loading"
    :visible="visible"
    okText="选择"
    destroyOnClose
    style="right: -5%"
    title="选择产品"
    width="90%"
    @cancel="react"
    @ok="handleChoose"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="4" :sm="24">
            <a-form-item label="查询类别">
              <a-select v-model="queryParam.Condition" allowClear>
                <a-select-option key="cInvName">产品名称</a-select-option>
                <a-select-option key="cInvCode">产品编码</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.Keyword" placeholder="关键字"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList(row)
                }"
            >查询
            </a-button
            >
            <a-button
              style="margin-left: 8px"
              @click="
                () => {
                  this.pagination.current = 1
                  this.queryParam = { Condition: 'cInvName' }
                  this.getDataList(row)
                }
              "
            >重置
            </a-button
            >
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      :bordered="true"
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      :pagination="pagination"
      :rowKey="(row, index) => row.AutoID"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: type, getCheckboxProps: CheckboxProps }"
      :scroll="{ y: scroll }"
      size="small"
      @change="handleTableChange">
      <span slot="dDate" slot-scope="dDate">{{ timeFormat(dDate, 'YYYY-MM-DD') }}</span>
      <span slot="iQuantity" slot-scope="iQuantity" v-format="'#,##0'">{{ iQuantity }}</span>
      <span slot="ShouldQuantity" slot-scope="ShouldQuantity" v-format="'#,##0'">{{ ShouldQuantity }}</span>
      <span slot="ReturnedQty" slot-scope="ReturnedQty" v-format="'#,##0'">{{ ReturnedQty }}</span>
      <span slot="NotiQuantity" slot-scope="NotiQuantity" v-format="'#,##0'">{{ NotiQuantity }}</span>
      <template slot="cInvCode" slot-scope="text, record">
        <span>{{ record.cInvCode }}/{{ record.cInvName }}</span>
      </template>
      <template slot="GiftPId" slot-scope="text, record">
        <span v-if="record.GiftPId">{{ record.GiftPId }}/{{ record.GiftInvName }}</span>
      </template>
    </a-table
    >
  </a-modal>
</template>

<script>
const columns = [
  {
    title: '发货',
    children: [
      { title: '销售单号', dataIndex: 'cSOCode' },
      { title: '单据日期', dataIndex: 'dDate', align: 'center', width: '6%', scopedSlots: { customRender: 'dDate' } },
      { title: '发货单号', dataIndex: 'cCode' },
      { title: '销售品名', dataIndex: 'cInvCode', width: '260px', scopedSlots: { customRender: 'cInvCode' } },
      { title: '发货数量', dataIndex: 'iQuantity', align: 'right', scopedSlots: { customRender: 'iQuantity' } }
    ]
  },
  {
    title: '返料',
    children: [
      { title: '返料品名', dataIndex: 'GiftPId', width: '260px', scopedSlots: { customRender: 'GiftPId' } },
      { title: '应返', dataIndex: 'ShouldQuantity', align: 'right', scopedSlots: { customRender: 'ShouldQuantity' } },
      { title: '已返', dataIndex: 'ReturnedQty', align: 'right', scopedSlots: { customRender: 'ReturnedQty' } },
      { title: '未返', dataIndex: 'NotiQuantity', align: 'right', scopedSlots: { customRender: 'NotiQuantity' } }
    ]
  }
]
export default {
  props: {
    type: { type: String, default: 'checkbox', required: false },
    id: { type: String, required: false }
  },

  mounted () {
  },
  computed: {
    scroll () {
      return Number(document.documentElement.clientHeight) * 0.45
    }
  },
  data () {
    return {
      row: {},
      list: [],
      data: [],
      qid: '',
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      PriceMainId: '',
      Prceid: '',
      filters: {},
      sorter: { field: 'cCusCode', order: 'desc' },
      loading: false,
      columns,
      queryParam: { Condition: 'cInvName' },
      selectedRowKeys: [],
      selectedRows: [],
      visible: false
    }
  },

  methods: {
    CheckboxProps (record) {
      const AutoID = this.list.map(item => {
        return item.AutoID
      })
      const a = AutoID.includes(record.AutoID)
      return {
        props: {
          disabled: a
        }
      }
    },
    react () {
      this.visible = false
      this.getDataList(this.row)
      this.pagination.current = 1
      this.pagination.pageSize = 25
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList(this.row)
    },
    getDataList (row) {
      this.loading = true
      this.$http
        .post('/GiftManagement/GMM_GiftMaterialApplyMain/GetGiftItemDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: {
            cCusCode: row.CustomerId,
            // parentid: row.RuleMainId,
            dDate: row.AccountingEndDate,
            Condition: this.queryParam.Condition,
            Keyword: this.queryParam.Keyword
          }
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          if (this.data) {
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          }
        })
    },

    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    openForm (row, data) {
      this.loading = false
      this.selectedRowKeys = []
      this.visible = true
      this.list = data
      if (row) {
        this.row = row
        this.getDataList(this.row)
      }
    },
    handleChoose () {
      this.visible = false
      this.$emit('onDetail', this.selectedRows)
      this.pagination.current = 1
      this.pagination.pageSize = 25
    }
  }
}
</script>
